import React from 'react';
import { Card } from 'antd';
import createG2 from 'g2-react';
import { Stat, Frame } from 'g2';
import PropTypes from 'prop-types';
import styles from './LineChart.less';


class LineChart extends React.Component {
  constructor(...args) {
    super(...args);
    let { width, height } = args[0].stys;
    const size = args[0].size || [];
    const windowWidth = document.body.clientWidth;
    if (windowWidth <= 1599 && size === 1) {
      height = 300;
    }
    // const {width,height} = args[0].styles.styles
    this.state = {
      data: this.setFrame(args[0].msg),
      loading: false,
      forceFit: true,
      width,
      height,
      colors: 1,
      plotCfg: {
        margin: [20, 20, 60, 50],
      },
    };
  }

  componentWillReceiveProps({ msg, colors }) {
    const data = msg || [];

    this.setState({
      colors,
      data: this.setFrame(data),
    });
  }

  setFrame = (data) => {
    const onMsg = data || [];
    const arr = [];
    for (let j = 0; j < onMsg.length; j++) {
      for (const i in onMsg[j]) {
        switch (i) {
          case 'new_user': onMsg[j]['新增用户'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'cancel_user': onMsg[j]['取关用户'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'int_page_read_user': onMsg[j]['阅读人数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'int_page_read_count': onMsg[j]['阅读次数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'share_user': onMsg[j]['分享人数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'share_count': onMsg[j]['分享次数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex0': onMsg[j]['未知'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex1': onMsg[j]['男'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'sex2': onMsg[j]['女'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'xm_money': onMsg[j]['厦门_交易金额'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'gd_money': onMsg[j]['广东_交易金额'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'xm_orders': onMsg[j]['厦门_订单数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          case 'gd_orders': onMsg[j]['广东_订单数'] = onMsg[j][i];
            delete onMsg[j][i];
            break;
          default:
        }
      }
    }

    for (const i in onMsg[0]) {
      arr.push(i);
    }
    const [a, ...b] = arr;
    let frame = new Frame(onMsg);
    frame = Frame.combinColumns(frame, b, 'value', 'city', 'date');
    return frame;
  }

  render() {
    const { title } = this.props || '';
    const { colors } = this.state;
    const Chart = createG2((chart) => {
      chart.col('date', {
        type: 'time',
        mask: 'mm.dd',
        tickCount: 12,
      });
      chart.col('value', {
        alias: ' ',
      });
      chart.legend({
        position: 'bottom',
      });
      chart.axis('date', {
        line: null,
        tickLine: {
          stroke: '#000',
          value: 6, // 刻度线长度
        },
        title: null,
      });
      chart.tooltip({
        crosshairs: true,
      });
      chart.axis('value', {
        tickLine: {
          stroke: '#000',
          value: 6, // 刻度线长度
        },
        labels: {
          label: {
            fill: '#000',
          },
        },
        line: {
          stroke: '#000',
        },
        grid: null,
      });

      const arrColor = ['#FFFD3D', '#10FF5A', '#A9F5D0', '#4B088A', '#FF00F6', '#0489B1'];
      Array.prototype.shuffle = function (n) {
        let len = this.length,
          num = n ? Math.min(n, len) : len,
          arr = this.slice(0);
        arr.sort((a, b) => {
          return colors;
        });
        return arr.slice(0, num - 1);
      };

      chart.get('container', {
        container: document.getElementById('c1'),
      });
      chart.line().position('date*value').color('city', arrColor.shuffle()).shape('spline').size(2);
      chart.render();
    });

    return (
      <Card bodyStyle={{ padding: 0 }}>
        <h3 style={{ textAlign: 'center' }}>{title}</h3>
        <Chart
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          forceFit={this.state.forceFit}
          className={styles.cardBack}
        />
      </Card>
    );
  }
}


LineChart.propTypes = {
  msg: PropTypes.array,
};


export default LineChart;

